<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="favicon.ico"
	type="/favicon.ico" />
<link rel="stylesheet" href="/css/index2.css" />
	<script src="/js/jquery-2.1.1.min.js" ></script>
<title>尚云AI平台</title>
<script type="text/javascript">
window.onload = function(){

	var btn = document.getElementById("btn1");
	btn.onclick = function(){
		var url = document.getElementById("url");
		var value = url.value;
		if(value.trim() == null || value.trim().length == 0){
			alert("请输入url");
			return;
		}else{
			// alert(value)
			// 这个位置可以调用接口
			$.ajax({
				url:"/ai/plantIdentification",
				data:{
					imgUrl:value
				},
				success(res){
					console.log(res);
					// 操作这些dom
					// max 显示图片
					document.getElementById("max").style.background = `url(${value})`
					// result显示结果
					document.getElementById("resultLink").innerText ="识别结果:"+ res.data.label;
					// resultLink这个a标签，需要打开对应的百度百科
					document.getElementById("resultLink").href = res.data.baike;
					// 展示这个数据
				}
			})
		}
	}
}
</script>
</head>

<body>
	<!-- 头部 -->
	<header>
		<div class="box1">
			<div class="title1">尚云AI平台</div>
			<div class="nav">
				<ul class="ul1">
					<li><a href="/ai/index">首页</a></li>
					<li class="liBox"><a href="#">计算机视觉 </a>
						<div class="box2">
							<ul class="box2One">
								<li class="li1"><a href="#">图像处理</a></li>
								<li><a href="#" class="a1">表情识别</a></li>
								<li><a href="#" class="a1">人脸识别</a></li>
								<li><a href="/ai/plant" class="a1">植物识别</a></li>
								<li><a href="#" class="a2">图像分类</a></li>
								<li><a href="#" class="a2">语义分割</a></li>
							</ul>
							<ul class="box2One box2Two">
								<li class="li1"><a href="#">视频处理</a></li>
								<li><a href="#" class="a2">视频摘要</a></li>
								<li><a href="#" class="a2">视频分类</a></li>
								<li><a href="#" class="a1">视频人脸检测</a></li>
								<li><a href="#" class="a2">物体识别</a></li>
							</ul>
						</div></li>
					<li><a href="#">自然语言处理 </a></li>
					<li><a href="#">数据服务</a></li>
					<li><a href="#">解决方案</a></li>
					<li><a href="/ai/contact">联系我们 </a></li>
				</ul>
			</div>
		</div>
	</header>

	<!-- 中间主体 -->
	<section>
		<!-- 背景图 -->
		<div class="backGround">
			<p class="title">植物识别</p>
			<p class="recommend">支持百种花卉识别，返回中英文名称</p>
			<button class="button">联系我们</button>
		</div>

		<!-- 功能介绍 -->

		<div class="function">
			<h2>功能介绍</h2>
			<ul>
				<li class="li1"><img src="/images/rentou.png" />
					<div class="wb">
						<p class="p1">识别物体名称</p>
						<p class="p2">支持识别上百种花卉，返回植物名称</p>
					</div></li>
				<li class="li2"><img src="/images/dunpai.png" />
					<div class="wb">
						<p class="p1">获取百科信息</p>
						<p class="p2">支持返回百科词条URL</p>
					</div></li>
				<li class="li3"><img src="/images/saomiao.png" />
					<div class="wb">
						<p class="p1">识别方式</p>
						<p class="p3">通过网络图片URL进行直接解析识别</p>
					</div></li>
			</ul>
		</div>

		<!-- 功能演示 -->

		<div class="demonstration">
			<h3>功能演示</h3>
			<div class="max" id="max">
				<div>
					<input type="text" id="url" placeholder="请输入网络图片URL" />
					<button class="btn1" id="btn1">监测</button>
					<p>图片文件类型支持PNG、JPG、JPEG，图片大小不超过2M。</p>
				</div>
				<!-- 识别结果 -->
				<div class="resulte1" id="resulte1"><a id="resultLink" href="" target="_blank">识别结果:玫瑰</a></div>
			</div>
			<div class="min">
				<img src="/images/xiao1.jpg" /> <img
					src="/images/xiao2.jpg" /> <img
					src="/images/xiao3.jpg" /> <img
					src="/images/xiao4.jpg" />
			</div>
		</div>

		<!-- 特色优势 -->
		<div class="function">
			<h2>特色优势</h2>
			<ul>
				<li class="li1"><img src="/images/rentou.png" />
					<div class="wb">
						<p class="p1">主流算法</p>
						<p class="p2">基于caffe框架和海量数据训练，算法识别准确率高</p>
					</div></li>
				<li class="li2"><img src="/images/dunpai.png" />
					<div class="wb">
						<p class="p1">服务稳定高效</p>
						<p class="p2">提供企业级稳定、精确的大流量服务。支持毫秒级的识别响应能力、弹性灵活的高并发</p>
					</div></li>
				<li class="li3"><img src="/images/saomiao.png" />
					<div class="wb">
						<p class="p1">灵活简单易用</p>
						<p class="p3">可对SDK进行二次开发，灵活调整业务代码，实现不同的业务功能</p>
					</div></li>
			</ul>
		</div>

	</section>

	<!-- 底部 -->
	<footer>
		<div class="footer-box">
			友情链接： <a>星云数据平台</a> <a>尚云科技</a> <a>天亮教育官网</a> <a>尚云舆情2.0</a>
		</div>
		<div class="footer-item">Copyright © 2017-2025 河北尚云信息科技有限公司
			备案号:冀ICP备17020003号</div>
	</footer>
</body>
<script>
	// 获取元素
	var title = document.getElementsByClassName("min")[0]
			.getElementsByTagName("img");
	var content = document.getElementById("max");
	// console.log(content);
	// 绑定事件
	for (var i = 0; i < title.length; i++) {
		console.log(i);
		title[i].onclick = function() {
			content.style.backgroundImage = "url(" + this.src + ")";
		}
	}
</script>

</html>